<template>
  <q-btn class="col" outline padding="sm" label="查看起点" color="grey-7"
         :disable="modelValue.length===0" @click="show">
    <q-badge floating rounded color="red" :label="modelValue.length"/>
    <q-dialog v-model="visible">
      <q-table
        title="点位列表"
        :rows="modelValue"
        :columns="columns"
        row-key="name">
        <template v-slot:body-cell-operation="props">
          <td>
            <q-btn label="删除" color="red-5" @click="remove(props.row.poseID)"/>
          </td>
        </template>
      </q-table>
    </q-dialog>
  </q-btn>
</template>

<script>
import { ref } from 'vue'

const columns = [
  {
    name: 'poseName',
    align: 'center',
    label: '点位名称',
    field: 'poseName'
  },
  {
    name: 'specs',
    align: 'center',
    label: '货物规格',
    field: 'specs'
  },
  {
    name: 'count',
    align: 'center',
    label: '货物数量',
    field: 'count'
  },
  {
    name: 'posture',
    align: 'center',
    label: '姿态点ID',
    field: 'posture'
  },
  {
    name: 'operation',
    align: 'center',
    label: '操作',
    field: 'operation'
  }
]
export default {
  name: 'CatchSenderList',
  props: {
    modelValue: Array
  },
  setup (props, context) {
    const visible = ref(false)
    return {
      columns,
      visible,
      show () {
        visible.value = true
      },
      remove (poseID) {
        const senderList = props.modelValue
        context.emit('update:modelValue', senderList.filter((item) => item.poseID !== poseID))
      }
    }
  }
}
</script>
